﻿@page "/components/expansionpanel"

<DocsPage>
    <DocsPageHeader Title="Expansion Panel"/>
    <DocsPageContent>
        <DocsPageSection>
            <SectionHeader>
                <Title>Simple Usage</Title>
                <Description></Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" FullWidth="true">
                <ExpansionPanelSimpleExample />
            </SectionContent>
            <SectionSource Code="ExpansionPanelSimpleExample" ShowCode="false" GitHubFolderName="ExpansionPanel" />
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader>
                <Title>Multiple Expanded Panels</Title>
                <Description></Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" FullWidth="true">
                <ExpansionPanelMultiExample />
            </SectionContent>
            <SectionSource Code="ExpansionPanelMultiExample" GitHubFolderName="ExpansionPanel" />
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader>
                <Title>Disabled</Title>
                <Description></Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" FullWidth="true">
                <ExpansionPanelDisabledExample />
            </SectionContent>
            <SectionSource Code="ExpansionPanelDisabledExample" GitHubFolderName="ExpansionPanel" />
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader>
                <Title>Padding</Title>
                <Description>The padding of the panels can be controlled with <CodeInline>DisableGutters</CodeInline> and <CodeInline>Dense</CodeInline> this can be done per panel or on all from the parent.</Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" FullWidth="true">
                <ExpansionPanelPaddingExample />
            </SectionContent>
            <SectionSource Code="ExpansionPanelPaddingExample" GitHubFolderName="ExpansionPanel" />
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader>
                <Title>Borders</Title>
                <Description>The <CodeInline>DisableBorders</CodeInline> property removes all borders around the panel.<br />For more flat ui design this might be prefered along with <CodeInline>Elevation</CodeInline> set to 0.</Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" FullWidth="true">
                <ExpansionPanelDisableBorderExample />
            </SectionContent>
            <SectionSource Code="ExpansionPanelDisableBorderExample" GitHubFolderName="ExpansionPanel" />
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader>
                <Title>Customizing the Header and Icon</Title>
                <Description></Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" FullWidth="true">
                <ExpansionPanelTitleExample />
            </SectionContent>
            <SectionSource Code="ExpansionPanelTitleExample" GitHubFolderName="ExpansionPanel" />
        </DocsPageSection>

    </DocsPageContent>
</DocsPage>